<template>
  <van-nav-bar title="标题" class="app-home-header">
    <template #left>
      <van-icon name="search" />
    </template>

    <template #right>
      <span>登录</span>
    </template>
    <template #title>
      <!-- 处理路由搜索区域跳转 -->
      <!-- <router-link :to="{ name: 'search' }" custom>
        <template #default="{ navigate }">
          <van-search
            placeholder="搜索"
            shape="round"
            @click-input="navigate"
          />
        </template>
      </router-link> -->

      <van-search
        placeholder="搜索"
        shape="round"
        @click-input="handleToSearch"
      />
    </template>
  </van-nav-bar>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
const router = useRouter();
const handleToSearch = () => {
  router.push({ name:'search' });
};
</script>

<style lang="scss" scoped>
.app-home-header {
  /* background-color: var(--van-primary-color); */
  .van-nav-bar__title {
    color: #fff;
  }
  .van-search {
    padding: 0;
    background-color: var(--van-primary-color);
  }
}
</style>
